<template>
	<view class="login-other">
		<view class="other-text">
			<view>或者用以下方式登录</view>
		</view>
		<view class="other">
			<view class="other-item">
				<image src="../../static/img/wx.png" @tap="loginOther('weixin')" mode=""></image>
				<view>微信登录</view>
			</view>
			<view class="other-item">
				<image src="../../static/img/wb.png" @tap="loginOther('sinaweibo')" mode=""></image>
				<view>微博登录</view>
			</view>
			<view class="other-item">
				<image src="../../static/img/qq.png" @tap="loginOther('qq')" mode=""></image>
				<view>QQ登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Login",
		data() {
			return {

			};
		},
		methods:{
			loginOther(mode){
				uni.login({
					provider:mode,
					success:res=> {
						//获取用户信息
						uni.getUserInfo({
							provider:mode,
							success:res=> {
								console.log(res.userInfo);
								let data = {
									//#ifdef APP-PLUS
									openId:res.userInfo.openId,
									userName:mode=='qq'?res.userInfo.nickname:res.userInfo.nickName,
									//#endif
									//#ifdef MP-WEIXIN
									openId:'wx',
									userName:mode=='qq'?res.userInfo.nickName:res.userInfo.nickName,
									//#endif
									imgUrl:res.userInfo.avatarUrl,
									token:'zzzz'
								}
								this.$store.commit("login",data)
								uni.navigateBack({
									delta:1
								})
								uni.showToast({
									title:"登录成功",
									icon:"none"
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 其他登录方式
	.login-other {
		padding: 100rpx 0;

		.other-text {
			display: flex;
			align-items: center;
			padding: 50rpx 0;

			view {
				padding: 0 10rpx;
			}

			&::after {
				flex: 1;
				content: "";
				height: 2rpx;
				background-color: #ccc;
			}

			&::before {
				flex: 1;
				content: "";
				height: 2rpx;
				background-color: #ccc;
			}
		}

		.other {
			display: flex;

			.other-item {
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 80rpx;
					height: 72rpx;
				}
			}
		}
	}
</style>
